<?php
namespace app\service;

/**
 * 组件渲染器 - 负责根据JSON数据渲染不同的组件
 */
class ComponentRenderer
{
    /**
     * 渲染组件
     * @param string $componentType 组件类型
     * @param array $componentData 组件数据
     * @param array $themeSettings 主题设置
     * @return string 渲染后的HTML
     */
    public static function render($componentType, $componentData = [], $themeSettings = [])
    {
        // 如果没有传入组件数据，从文件中获取
        if (empty($componentData)) {
            $componentData = get_component_data($componentType, $componentType . '.json');
        }
        
        // 根据组件类型调用不同的渲染方法
        $method = 'render' . ucfirst($componentType);
        
        if (method_exists(__CLASS__, $method)) {
            return self::$method($componentData, $themeSettings);
        }
        
        // 默认渲染方法
        return self::renderDefault($componentType, $componentData, $themeSettings);
    }
    
    /**
     * 渲染导航栏组件
     */
    private static function renderNavbar($data, $themeSettings)
    {
        $html = '<nav class="navbar navbar-expand-lg" style="';
        
        // 添加样式
        if (isset($data['styles'])) {
            $styles = $data['styles'];
            if (isset($styles['position'])) $html .= 'position: ' . $styles['position'] . ';';
            if (isset($styles['width'])) $html .= 'width: ' . $styles['width'] . ';';
            if (isset($styles['zIndex'])) $html .= 'z-index: ' . $styles['zIndex'] . ';';
            if (isset($styles['background'])) {
                $bgColor = $styles['background'] === 'primary' ? $themeSettings['theme']['primaryColor'] : 
                           ($styles['background'] === 'white' ? '#ffffff' : $styles['background']);
                $html .= 'background-color: ' . $bgColor . ';';
            }
            if (isset($styles['shadow'])) $html .= 'box-shadow: ' . $styles['shadow'] . ';';
            if (isset($styles['transition'])) $html .= 'transition: ' . $styles['transition'] . ';';
        }
        
        $html .= '">';
        $html .= '<div class="container">';
        
        // 渲染Logo
        if (isset($data['content']['logo'])) {
            $logo = $data['content']['logo'];
            $html .= '<a class="navbar-brand" href="#">';
            
            // Logo背景
            if (isset($logo['background'])) {
                $bgColor = $logo['background'] === 'primary' ? $themeSettings['theme']['primaryColor'] : $logo['background'];
                $html .= '<span class="inline-block text-white" style="background-color: ' . $bgColor . '; padding: 5px 10px;';
                
                // Logo形状
                if (isset($logo['shape'])) {
                    $html .= 'border-radius: ' . ($logo['shape'] === 'rounded-lg' ? '8px' : '4px') . ';';
                }
                
                $html .= '">';
                $html .= $logo['text'] ?? '';
                $html .= '</span>';
            }
            
            // Logo全称
            if (isset($logo['fullName'])) {
                $html .= ' <span>' . $logo['fullName'] . '</span>';
            }
            
            $html .= '</a>';
        }
        
        // 移动端菜单按钮
        $html .= '<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">';
        $html .= '<span class="navbar-toggler-icon"></span>';
        $html .= '</button>';
        
        // 导航菜单
        $html .= '<div class="collapse navbar-collapse" id="navbarNav">';
        $html .= '<ul class="navbar-nav ml-auto">';
        
        // 渲染导航项
        if (isset($data['content']['navItems'])) {
            foreach ($data['content']['navItems'] as $item) {
                $html .= '<li class="nav-item">';
                $html .= '<a class="nav-link" href="' . ($item['href'] ?? '#') . '">' . ($item['name'] ?? '') . '</a>';
                $html .= '</li>';
            }
        }
        
        // 渲染CTA按钮
        if (isset($data['content']['ctaButton'])) {
            $button = $data['content']['ctaButton'];
            $btnClass = 'btn ';
            
            // 按钮样式
            if (isset($button['style'])) {
                $btnClass .= $button['style'] === 'primary' ? 'btn-primary' : 'btn-secondary';
            }
            
            $html .= '<li class="nav-item ml-2">';
            $html .= '<a class="' . $btnClass . '" href="' . ($button['href'] ?? '#') . '">';
            
            // 按钮图标
            if (isset($button['icon'])) {
                $html .= '<i class="fa fa-' . $button['icon'] . ' mr-1"></i> ';
            }
            
            $html .= $button['text'] ?? '';
            $html .= '</a>';
            $html .= '</li>';
        }
        
        $html .= '</ul>';
        $html .= '</div>';
        $html .= '</div>';
        $html .= '</nav>';
        
        return $html;
    }
    
    /**
     * 渲染英雄区域组件
     */
    private static function renderHero($data, $themeSettings)
    {
        $html = '<section class="hero" style="';
        
        // 添加样式
        if (isset($data['styles'])) {
            $styles = $data['styles'];
            if (isset($styles['height'])) $html .= 'height: ' . $styles['height'] . ';';
            if (isset($styles['background'])) {
                $bgColor = $styles['background'] === 'primary' ? $themeSettings['theme']['primaryColor'] : $styles['background'];
                $html .= 'background-color: ' . $bgColor . ';';
            }
            if (isset($styles['color'])) $html .= 'color: ' . $styles['color'] . ';';
            if (isset($styles['textAlign'])) $html .= 'text-align: ' . $styles['textAlign'] . ';';
            if (isset($styles['display'])) $html .= 'display: ' . $styles['display'] . ';';
            if (isset($styles['alignItems'])) $html .= 'align-items: ' . $styles['alignItems'] . ';';
            if (isset($styles['justifyContent'])) $html .= 'justify-content: ' . $styles['justifyContent'] . ';';
            if (isset($styles['padding'])) $html .= 'padding: ' . $styles['padding'] . ';';
        }
        
        $html .= '">';
        $html .= '<div class="container">';
        
        // 渲染内容
        if (isset($data['content'])) {
            $content = $data['content'];
            
            // 标题
            if (isset($content['title'])) {
                $html .= '<h1 class="display-3 mb-4">' . $content['title'] . '</h1>';
            }
            
            // 副标题
            if (isset($content['subtitle'])) {
                $html .= '<p class="lead mb-6 max-w-2xl mx-auto">' . $content['subtitle'] . '</p>';
            }
            
            // 按钮组
            if (isset($content['ctaButton']) || isset($content['secondaryButton'])) {
                $html .= '<div class="d-flex flex-wrap justify-center gap-4">';
                
                // 主按钮
                if (isset($content['ctaButton'])) {
                    $button = $content['ctaButton'];
                    $btnClass = 'btn ';
                    
                    // 按钮样式
                    if (isset($button['style'])) {
                        $btnClass .= $button['style'] === 'primary' ? 'btn-primary' : 
                                   ($button['style'] === 'light' ? 'btn-light' : 
                                   ($button['style'] === 'transparent' ? 'btn-outline-light' : 'btn-secondary'));
                    }
                    
                    // 按钮大小
                    if (isset($button['size'])) {
                        $btnClass .= ' ' . ($button['size'] === 'lg' ? 'btn-lg' : 'btn-sm');
                    }
                    
                    $html .= '<a class="' . $btnClass . '" href="' . ($button['href'] ?? '#') . '">';
                    
                    // 按钮图标
                    if (isset($button['icon'])) {
                        $html .= '<i class="fa fa-' . $button['icon'] . ' mr-1"></i> ';
                    }
                    
                    $html .= $button['text'] ?? '';
                    $html .= '</a>';
                }
                
                // 次要按钮
                if (isset($content['secondaryButton'])) {
                    $button = $content['secondaryButton'];
                    $btnClass = 'btn ';
                    
                    // 按钮样式
                    if (isset($button['style'])) {
                        $btnClass .= $button['style'] === 'primary' ? 'btn-primary' : 
                                   ($button['style'] === 'light' ? 'btn-light' : 
                                   ($button['style'] === 'transparent' ? 'btn-outline-light' : 'btn-secondary'));
                    }
                    
                    // 按钮大小
                    if (isset($button['size'])) {
                        $btnClass .= ' ' . ($button['size'] === 'lg' ? 'btn-lg' : 'btn-sm');
                    }
                    
                    $html .= '<a class="' . $btnClass . '" href="' . ($button['href'] ?? '#') . '">';
                    
                    // 按钮图标
                    if (isset($button['icon'])) {
                        $html .= '<i class="fa fa-' . $button['icon'] . ' mr-1"></i> ';
                    }
                    
                    $html .= $button['text'] ?? '';
                    $html .= '</a>';
                }
                
                $html .= '</div>';
            }
        }
        
        $html .= '</div>';
        $html .= '</section>';
        
        return $html;
    }
    
    /**
     * 渲染服务模块组件
     */
    private static function renderServices($data, $themeSettings)
    {
        $html = '<section id="services" style="';
        
        // 添加样式
        if (isset($data['styles'])) {
            $styles = $data['styles'];
            if (isset($styles['background'])) {
                $bgColor = $styles['background'] === 'light' ? $themeSettings['theme']['lightColor'] : $styles['background'];
                $html .= 'background-color: ' . $bgColor . ';';
            }
            if (isset($styles['padding'])) $html .= 'padding: ' . $styles['padding'] . ';';
        }
        
        $html .= '">';
        $html .= '<div class="container">';
        
        // 渲染标题部分
        if (isset($data['content'])) {
            $content = $data['content'];
            
            $html .= '<div class="text-center mb-10">';
            
            // 标题
            if (isset($content['title'])) {
                $html .= '<h2 class="display-4 mb-4">' . $content['title'] . '</h2>';
            }
            
            // 副标题
            if (isset($content['subtitle'])) {
                $html .= '<p class="text-muted max-w-2xl mx-auto">' . $content['subtitle'] . '</p>';
            }
            
            $html .= '</div>';
            
            // 渲染服务项
            if (isset($content['serviceItems']) && is_array($content['serviceItems'])) {
                $html .= '<div class="row">';
                
                foreach ($content['serviceItems'] as $index => $item) {
                    $html .= '<div class="col-md-4 mb-6">';
                    $html .= '<div class="card h-100">';
                    $html .= '<div class="card-body text-center">';
                    
                    // 图标
                    if (isset($item['icon'])) {
                        $html .= '<i class="fa fa-' . $item['icon'] . ' fa-3x mb-4" style="color: ' . $themeSettings['theme']['primaryColor'] . ';"></i>';
                    }
                    
                    // 标题
                    if (isset($item['title'])) {
                        $html .= '<h3 class="card-title mb-2">' . $item['title'] . '</h3>';
                    }
                    
                    // 描述
                    if (isset($item['description'])) {
                        $html .= '<p class="card-text text-muted">' . $item['description'] . '</p>';
                    }
                    
                    // 链接
                    if (isset($item['link'])) {
                        $html .= '<a href="' . $item['link'] . '" class="text-primary">了解更多 <i class="fa fa-arrow-right ml-1"></i></a>';
                    }
                    
                    $html .= '</div>';
                    $html .= '</div>';
                    $html .= '</div>';
                }
                
                $html .= '</div>';
            }
        }
        
        $html .= '</div>';
        $html .= '</section>';
        
        return $html;
    }
    
    /**
     * 渲染页脚组件
     */
    private static function renderFooter($data, $themeSettings)
    {
        $html = '<footer style="';
        
        // 添加样式
        if (isset($data['styles'])) {
            $styles = $data['styles'];
            if (isset($styles['background'])) {
                $bgColor = $styles['background'] === 'dark' ? '#1a202c' : $styles['background'];
                $html .= 'background-color: ' . $bgColor . ';';
            }
            if (isset($styles['color'])) $html .= 'color: ' . $styles['color'] . ';';
            if (isset($styles['padding'])) $html .= 'padding: ' . $styles['padding'] . ';';
        } else {
            // 默认样式
            $html .= 'background-color: #1a202c; color: white; padding: 40px 0;';
        }
        
        $html .= '">';
        $html .= '<div class="container">';
        
        // 渲染内容
        if (isset($data['content'])) {
            $content = $data['content'];
            
            $html .= '<div class="row">';
            
            // Logo和描述
            if (isset($content['logo']) && isset($content['description'])) {
                $html .= '<div class="col-md-4 mb-4">';
                
                // Logo
                if (isset($content['logo']['text'])) {
                    $html .= '<h3 class="mb-3">' . $content['logo']['text'] . '</h3>';
                }
                
                // 描述
                $html .= '<p class="text-gray-400">' . $content['description'] . '</p>';
                
                $html .= '</div>';
            }
            
            // 联系方式
            if (isset($content['contactInfo'])) {
                $html .= '<div class="col-md-4 mb-4">';
                $html .= '<h3 class="mb-3">联系方式</h3>';
                $html .= '<ul class="list-unstyled">';
                
                if (isset($content['contactInfo']['address'])) {
                    $html .= '<li class="mb-2"><i class="fa fa-map-marker mr-2"></i> ' . $content['contactInfo']['address'] . '</li>';
                }
                
                if (isset($content['contactInfo']['phone'])) {
                    $html .= '<li class="mb-2"><i class="fa fa-phone mr-2"></i> ' . $content['contactInfo']['phone'] . '</li>';
                }
                
                if (isset($content['contactInfo']['email'])) {
                    $html .= '<li class="mb-2"><i class="fa fa-envelope mr-2"></i> ' . $content['contactInfo']['email'] . '</li>';
                }
                
                $html .= '</ul>';
                $html .= '</div>';
            }
            
            // 社交媒体
            if (isset($content['socialLinks'])) {
                $html .= '<div class="col-md-4 mb-4">';
                $html .= '<h3 class="mb-3">关注我们</h3>';
                $html .= '<div class="d-flex space-x-4">';
                
                foreach ($content['socialLinks'] as $link) {
                    $html .= '<a href="' . ($link['href'] ?? '#') . '" class="text-white hover:text-primary transition-colors" style="font-size: 1.5rem;">';
                    $html .= '<i class="fa fa-' . ($link['icon'] ?? '') . '"></i>';
                    $html .= '</a>';
                }
                
                $html .= '</div>';
                $html .= '</div>';
            }
            
            $html .= '</div>';
            
            // 版权信息
            if (isset($content['copyright'])) {
                $html .= '<div class="text-center pt-4 border-t border-gray-700 text-gray-400">';
                $html .= '<p>' . $content['copyright'] . '</p>';
                $html .= '</div>';
            }
        }
        
        $html .= '</div>';
        $html .= '</footer>';
        
        return $html;
    }
    
    /**
     * 默认渲染方法
     */
    private static function renderDefault($componentType, $data, $themeSettings)
    {
        $title = helper('get_component_title', [$componentType]);
        
        $html = '<section id="' . $componentType . '" class="py-12 bg-light">';
        $html .= '<div class="container">';
        $html .= '<div class="text-center">';
        $html .= '<h2 class="display-4 mb-4">' . $title . '</h2>';
        $html .= '<p>此组件正在开发中，敬请期待...</p>';
        $html .= '</div>';
        $html .= '</div>';
        $html .= '</section>';
        
        return $html;
    }
}